<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的响应式处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <!-- 
        1.通过数组的下标去修改数组中的元素，会有响应式处理吗？
            默认是没有响应式
        2.怎么解决数组的响应式处理？
            第一种方案：
                vm.$set(数组对象, 下标, 值)
                Vue.set(数组对象, 下标, 值)
            第二种方案：
                push()、pop()、reverse()、splice()、shift()、unshift()、sort()
                在Vue中，通过以上7个方法来给数组添加响应式处理
    -->
    <div id="app">
        <h1>{{msg}}</h1>

        <ul>
            <li v-for="user of users">
                {{user}}
            </li>
        </ul>

        <ul>
            <li v-for="vip of vips" :key="vip.id">
                {{vip.name}}
            </li>
        </ul>


    </div>

    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '数组的响应式处理',
                users: ['zhangsan', 'lisi', 'wangwu'],
                vips: [
                    { id: 1, name: '李四' },
                    { id: 2, name: '张三' }
                ]
            }
        })

    </script>

</body>

</html>